<template>
	<view class="create-standard">
		<view class="create-project-form">
			<view class="create-item">
				<text class="info-item-title">事项分类</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入事项分类" disabled v-if="isDisabled" v-model="projectClassifyName">
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入事项分类" v-else v-model="projectClassifyName">
			</view>
			<view class="create-item">
				<text class="info-item-title">事项明细</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入事项明细" v-model="projectDetailName">
			</view>

			<view class="create-item">
				<text class="info-item-title">点检标准</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入点检标准" v-model="projectStandardName">
			</view>

			<view class="create-item">
				<text class="info-item-title">点检岗位</text>
				<input class="info-item-input" type="text" @click="handleRole" placeholder-class="placeholderFontClass"
					disabled readonly placeholder="请选择点检岗位" v-model="roleName">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<view class="create-item">
				<text class="info-item-title">执行岗位</text>
				<input class="info-item-input" type="text" @click="handledoRole"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择执行岗位"
					v-model="doRoleName">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<view class="create-item">
				<text class="info-item-title">执行频次</text>
				<input class="info-item-input" type="text" @click="handleFrequency"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择执行频次"
					v-model="frequency">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>


		</view>
		<button class="create-btn" @click.stop.prevent="handleSubmitCreate">确认创建</button>

		<!-- 执行岗位popup -->
		<van-popup :show="doRolePopShow" position="bottom">
			<van-picker show-toolbar :columns="roleList" @confirm="onDoRoleConfirm" @cancel="doRolePopShow = false" />
		</van-popup>

		<!-- 点检岗位popup -->
		<van-popup :show="rolePopShow" position="bottom">
			<van-picker show-toolbar :columns="roleList" @confirm="onRoleConfirm" @cancel="rolePopShow = false" />
		</van-popup>

		<!-- 执行频次popup -->
		<van-popup :show="frequencyPopShow" position="bottom">
			<van-picker show-toolbar :columns="frequencyList" @confirm="onFrequencyConfirm"
				@cancel="frequencyPopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				projectClassifyName: '',
				projectDetailName: '',
				projectStandardName: '',
				roleName: '',
				doRoleName: '',
				frequency: '',
				rolePopShow: false,
				doRolePopShow: false,
				roleList: [],
				frequencyPopShow: false,
				frequencyList: ['单次', '每日', '每周', '每月'],
				projectInfo: {},
				isDisabled: false,
			}
		},
		onLoad(option) {
			console.log('option', option);
			if (option && option.className != "") {
				this.projectClassifyName = option.className;
				this.isDisabled = true;
			}
			const projectInfo = uni.getStorageSync("projectInfo");
			if (projectInfo) {
				this.projectInfo = projectInfo;
			}
			this.handleGetRoleList();
		},
		methods: {
			// 获取职位列表
			handleGetRoleList() {
				const loginInfo = uni.getStorageSync("loginInfo");
				const isLogin = uni.getStorageSync("isLogin");
				var that = this;
				if (!loginInfo && !isLogin) {
					uni.reLaunch({
						url: "/pages/workbench/workbench"
					})
				}
				if (loginInfo && loginInfo.companys.length > 0) {
					let id = loginInfo.companys[0].shopId;
					apiRqs._getRoleList(id).then((res) => {
						console.log('res', res);
						if (res.code == 200) {
							let roleNameList = [];
							for (let i = 0; i < res.data.length; i++) {
								roleNameList.push(res.data[i].roleName);
							}
							that.roleList = roleNameList;
						}
					}).catch((err) => {
						console.log('err', err);
					})
				}
			},
			handleRole() {
				this.rolePopShow = true;
			},
			handledoRole() {
				this.doRolePopShow = true;
			},
			handleFrequency() {
				this.frequencyPopShow = true;
			},
			onRoleConfirm(value) {
				this.roleName = value.detail.value;
				this.rolePopShow = false;
			},
			onDoRoleConfirm(value) {
				this.doRoleName = value.detail.value;
				this.doRolePopShow = false;
			},
			onFrequencyConfirm(value) {
				this.frequency = value.detail.value;
				this.frequencyPopShow = false;
			},
			handleSubmitCreate() {
				let {
					projectClassifyName,
					projectDetailName,
					projectStandardName,
					roleName,
					doRoleName,
					frequency
				} = this;
				if (projectClassifyName.trim() == "") {
					getApp().showToast("事项分类不能为空");
				} else if (projectDetailName.trim() == "") {
					getApp().showToast("事项明细不能为空");
				} else if (projectStandardName.trim() == "") {
					getApp().showToast("点检标准不能为空");
				} else if (roleName == "") {
					getApp().showToast("点检岗位不能为空");
				} else if (doRoleName == "") {
					getApp().showToast("执行岗位不能为空");
				} else if (frequency == "") {
					getApp().showToast("执行频次不能为空");
				} else {
					// getApp().showLoading();
					let rqs = {
						"id": "0",
						"checkId": this.projectInfo.id,
						"class": projectClassifyName,
						"items": projectDetailName,
						"standard": projectStandardName,
						"result": 0,
						"frequency": frequency,
						"checkObject": "0",
						"checkPost": roleName,
						"inspectObject": "0",
						"inspectPost": doRoleName
					};
					console.log('rqs', rqs);
					apiRqs._createProjectDetail(rqs).then((res) => {
						uni.hideLoading();
						if (res.code == 200) {
							getApp().showToast("创建成功", "success");
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							getApp().showToast(res.msg);
						}
					}).catch((err) => {
						console.log('err', err)
					})
				}
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.create-standard {
		.create-project-form {
			margin: 20px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;

				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&:last-child {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
